29:null 2a:["$","title",null,{"children":"Multi-View Composition | Stanford Visualization | Observable"}] 2f:T40a,md` When visualizing a number of different data fields, we might be tempted to use as many visual encoding channels as we can: \`x\`, \`y\`, \`color\`, \`size\`, \`shape\`, and so on. However, as the number of encoding channels increases, a chart can rapidly become cluttered and difficult to read. An alternative to "over-loading" a single chart is to instead _compose multiple charts_ in a way that facilitates rapid comparisons. In this notebook, we will examine a variety of operations for _multi-view composition_: - [_layer_](#layer): place compatible charts directly on top of each other, - [_facet_](#facet): partition data into multiple charts, organized in rows or columns, - [_concatenate_](#concatenate): position arbitrary charts within a shared layout, and - [_repeat_](#repeat): take a base chart specification and apply it to multiple data fields. We'll then look at how these operations form a _view composition algebra_, in which the operations can be combined to build a variety of complex multi-view displays. `30:T53e,md` _Unsurprisingly, those rare snow days center on the coldest temperatures, followed by rainy and foggy days. Sunny days are warmer and, despite Seattle stereotypes, are the most plentiful. Though as any Seattleite can tell you, the drizzle occasionally comes, no matter the temperature!_ In addition to \`row\` and \`column\` encoding channels *within* a mark definition, we can take a basic mark definition and then apply faceting using an explicit \`facet\` operator. Let's recreate the chart above, but this time using \`facet\`. We start with the same basic histogram definition, but remove the data source, filter transform, and column channel. We can then invoke the \`facet\` method, passing in the data and specifying that we should facet into columns according to the \`weather\` field. The \`facet\` method accepts both \`row\` and \`column\` parameters. The two can be used together to create a 2D grid of faceted plots. Finally we include our filter transform, applying it to the top-level faceted chart. While we could apply the filter transform to the histogram definition as before, that is slightly less efficient. Rather than filter out "New York" values within each facet cell, applying the filter to the faceted chart lets Vega-Lite know that we can filter out those values up front, prior to the facet subdivision. `31:T43d,md` The concatenation operators above are quite general, allowing arbitrary charts to be composed. Nevertheless, the example above was still a bit verbose: we have three very similar charts, yet have to define them separately and then concatenate them. For cases where only one or two variables are changing, the \`repeat\` operator provides a convenient shortcut for creating multiple charts. Given a *template* specification with some free variables, the repeat operator will then create a chart for each specified assignment of those variables. Let's recreate our concatenation example above using the \`repeat\` operator. The only aspect that changes across charts is the choice of data field for the \`y\` encoding channel. To create a template specification, we can use the *repeater variable* \`vl.repeat('column')\` as our y-axis field. This code simply states that we want to use the variable assigned to the \`column\` repeater, which organizes repeated charts in a horizontal direction. We then invoke the \`repeat\` method, passing in data field names for each column: `32:T5b9,md` Repetition is supported for both columns and rows. _What happens if you modify the code above to use \`row\` instead of \`column\`?_ We can also use \`row\` and \`column\` repetition together! One common visualization for exploratory data analysis is the [scatter plot matrix (or SPLOM)](https://en.wikipedia.org/wiki/Scatter_plot#Scatterplot_matrices). Given a collection of variables to inspect, a SPLOM provides a grid of all pairwise plots of those variables, allowing us to assess potential associations. Let's use the \`repeat\` operator to create a SPLOM for the \`temp_max\`, \`precipitation\`, and \`wind\` fields. We first create our template specification, with repeater variables for both the x- and y-axis data fields. We then invoke \`repeat\`, passing in arrays of field names to use for both \`row\` and \`column\`. Vega-Lite will then generate the [cross product (or, Cartesian product)](https://en.wikipedia.org/wiki/Cartesian_product) to create the full space of repeated charts. _Looking at these plots, there does not appear to be a strong association between precipitation and wind, though we do see that extreme wind and precipitation events occur in similar temperature ranges (~5-15° C). However, this observation is not particularly surprising: if we revisit our histogram at the beginning of the facet section, we can plainly see that the days with maximum temperatures in the range of 5-15° C are the most commonly occurring._ `33:T569,{ const splom = vl.markCircle({size: 15, opacity: 0.5}) .encode( vl.x().fieldQ(vl.repeat('column')), vl.y().fieldQ(vl.repeat('row')), ) .width(125) .height(125) .repeat({ row: ['temp_max', 'precipitation', 'wind'], column: ['wind', 'precipitation', 'temp_max'] }); const dateHist = vl.layer( vl.markBar().encode( vl.x().month('date').type('ordinal').title('Month'), vl.y().average(vl.repeat('row')) ), vl.markRule({stroke: 'firebrick'}).encode( vl.y().average(vl.repeat('row')) ) ) .width(175) .height(125) .repeat({row: ['temp_max', 'precipitation', 'wind']}); const tempHist = vl.markBar() .encode( vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'), vl.y().count(), vl.color().fieldN('weather').scale({ domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'], range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52'] }) ) .width(115) .height(100) .facet({column: vl.field('weather')}); return vl.data(weather) .transform(vl.filter('datum.location == "Seattle"')) .title('Seattle Weather Dashboard') .vconcat( vl.hconcat(splom, dateHist), tempHist ) .resolve({legend: {color: 'independent'}}) .config({axis: {labelAngle: 0}}) .render(); }34:T4be,md` The full composition model for this dashboard is: ~~~ vconcat |- hconcat | |- repeat(row: [...], column: [...]) | | |- splom base chart | |- repeat(row: [...]) | |- layer | |- dateHist base chart 1 | |- dateHist base chart 2 |- facet(column: 'weather') |- tempHist base chart ~~~ _Phew!_ The dashboard also includes a few customizations to improve the layout: - We adjust chart \`width\` and \`height\` properties to assist alignment and ensure the full visualization fits on the screen. - We add \`resolve({legend: {color: 'independent'}})\` to ensure the color legend is associated directly with the colored histograms by temperature. Otherwise, the legend will resolve to the dashboard as a whole. - We use \`config({axis: {labelAngle: 0}})\` to ensure that no axis labels are rotated. This helps to ensure proper alignment among the scatter plots in the SPLOM and the histograms by month on the right. _Try removing or modifying any of these adjustments and see how the dashboard layout responds!_ This dashboard can be reused to show data for other locations or from other datasets. _Update the dashboard to show weather patterns for New York instead of Seattle._ `35:[{"id":"227de0b3d4cb329cda7d8a2257ef22e35c8cc61efeb386290e812afd302654aa2fd44abdf9879da45e027cb40c3e11977d89fad53ad95ed6ca787574476e3aca","href":"https://static.observableusercontent.com/files/227de0b3d4cb329cda7d8a2257ef22e35c8cc61efeb386290e812afd302654aa2fd44abdf9879da45e027cb40c3e11977d89fad53ad95ed6ca787574476e3aca","name":"ex1.png","type":"image/png","lastModified":1600647903631.67,"size":142012}] 2d:{"id":"e28cdc9d524a98b4","slug":"multi-view-composition","title":"Multi-View Composition","thumbnail":"fe9f33c082d7410e90e408f459385c57bcf14d82dd52eaf2981b4b557fcdccb1","access_level":"public","create_time":"$D2020-09-21T00:25:03.631Z","update_time":"$D2020-09-29T14:09:29.931Z","view_time":null,"first_public_time":"$D2020-09-21T00:26:49.200Z","has_unpublished_edits":null,"fork":true,"stars":17,"starred":false,"owner":{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026"},"version":577,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null}],"members":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null,"role":"editor"},{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":61,"collection":{"id":"b4e50de3795ed80f","slug":"cs-448b-public-notebooks","title":"CS 448B Vega-Lite Public Notebooks","owner":{"id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization"}},"type":"notebook","body":{"title":"Multi-View Composition","cells":[{"id":0,"value":"md`# Multi-View Composition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"md`\n*This document was adapted from [a reading](https://observablehq.com/@uwdata/multi-view-composition) by the UW Interactive Data Lab.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n

\n## Weather Data\n\nWe will be visualizing weather statistics for the U.S. cities of Seattle and New York. Let's load the dataset and peek at the first and last 10 rows:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"printTable(weather.slice(0, 10)) // first ten rows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"printTable(weather.slice(-10)) // last ten rows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`We will create multi-view displays to examine weather within and across the cities.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"layer = md`\n

\n## Layer\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`\nOne of the most common ways of combining multiple charts is to *layer* marks on top of each other. If the underlying scale domains are compatible, we can merge them to form _shared axes_. If either of the \\`x\\` or \\`y\\` encodings is not compatible, we might instead create a _dual-axis chart_, which overlays marks using separate scales and axes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n### Shared Axes\n\nLet's start by plotting the minimum and maximum average temperatures per month:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"vl.markArea()\n .data(weather)\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_max'),\n vl.y2().average('temp_min')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\n_The plot shows us temperature ranges for each month over the entirety of our data. However, this is pretty misleading as it aggregates the measurements for both Seattle and New York!_\n\nLet's subdivide the data by location using a color encoding, while also adjusting the mark opacity to accommodate overlapping areas:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"vl.markArea({opacity: 0.3})\n .data(weather)\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_max'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\n_We can see that Seattle is more temperate: warmer in the winter, and cooler in the summer._\n\nIn this case we've created a layered chart without any special features by simply subdividing the area marks by color. While the chart above shows us the temperature ranges, we might also want to emphasize the middle of the range.\n\nLet's create a line chart showing the average temperature midpoint. We'll use a \\`calculate\\` transform to compute the midpoints between the minimum and maximum daily temperatures:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"vl.markLine()\n .data(weather)\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')\n )\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`\nWe'd now like to combine these charts by layering the midpoint lines over the range areas. Using the \\`vl.layer()\\` method, we can specify that we want a new layered chart in which \\`chart1\\` is the first layer and \\`chart2\\` is a second layer drawn on top:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3})\n .data(weather)\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_max'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine()\n .data(weather)\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')\n )\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`\n_Now we have a multi-layer plot! However, the y-axis title (though informative) has become a bit long and unruly..._\n\nLet's customize our axes to clean up the plot. If we set a custom axis title within one of the layers, it will automatically be used as a shared axis title for all the layers:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3})\n .data(weather)\n .encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine()\n .data(weather)\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')\n )\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`\n_What happens if both layers have custom axis titles? Modify the code above to find out..._\n\nWhen creating multiple views, we might find ourselves redundantly specifying the same input data for multiple marks. If we want to, we can move a shared data definition to the \\`layer\\`-level for more compact specifications, like so:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine().encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid)\n .data(weather)\n .transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`\nNote that the order of inputs to a layer matters, as subsequent layers will be drawn on top of earlier layers. _Try swapping the order of the charts in the cells above. What happens? (Hint: look closely at the color of the \\`line\\` marks.)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`### Dual-Axis Charts\n\n_Seattle has a reputation as a rainy city. Is that deserved?_\n\nLet's look at precipitation alongside temperature to learn more. First let's create a base plot that shows average monthly precipitation in Seattle:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"vl.markLine({interpolate: 'monotone', stroke: 'grey'})\n .data(weather)\n .transform(\n vl.filter('datum.location == \"Seattle\"')\n )\n .encode(\n vl.x().month('date').title(null),\n vl.y().average('precipitation').title('Precipitation')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`\nTo facilitate comparison with the temperature data, let's create a new layered chart. Here's what happens if we try to layer the charts as we did earlier:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min')\n );\n \n const precip = vl.markLine({interpolate: 'monotone', stroke: 'grey'}).encode(\n vl.x().month('date').title(null),\n vl.y().average('precipitation').title('Precipitation')\n );\n \n return vl.layer(tempMinMax, precip)\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`\n_The precipitation values use a much smaller range of the y-axis than the temperatures!_\n\nBy default, layered charts use a *shared domain*: the values for the x-axis or y-axis are combined across all the layers to determine a shared extent. This default behavior assumes that the layered values have the same units. However, this doesn't hold up for this example, as we are combining temperature values (degrees Celsius) with precipitation values (inches)!\n\nIf we want to use different y-axis scales, we need to specify how we want Vega-Lite to *resolve* the data across layers. In this case, we want to resolve the y-axis \\`scale\\` domains to be \\`independent\\` rather than use a \\`shared\\` domain:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min')\n );\n \n const precip = vl.markLine({interpolate: 'monotone', stroke: 'grey'}).encode(\n vl.x().month('date').title(null),\n vl.y().average('precipitation').title('Precipitation')\n );\n \n return vl.layer(tempMinMax, precip)\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .resolve({scale: {y: 'independent'}}) // resolve to independent y channel scales\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`\n_We can now see that autumn is the rainiest season in Seattle (peaking in November), complemented by dry summers._\n\nWhile dual-axis charts can be useful, _they are often prone to misinterpretation_, as the different units and axis scales may be incommensurate. As is feasible, you might consider transformations that map different data fields to shared units, for example showing [quantiles](https://en.wikipedia.org/wiki/Quantile) or relative percentage change.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"facet = md`\n

\n## Facet\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\n*Faceting* involves subdividing a dataset into groups and creating a separate plot for each group. In earlier notebooks, we learned how to create faceted charts using the \\`row\\` and \\`column\\` encoding channels. We'll first review those channels and then show how they are instances of the more general \\`facet\\` operator.\n\nLet's start with a basic histogram of maximum temperature values in Seattle:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"vl.markBar()\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),\n vl.y().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n_How does this temperature profile change based on the weather of a given day – that is, whether there was drizzle, fog, rain, snow, or sun?_\n\nLet's use the \\`column\\` encoding channel to facet the data by weather type. We can also use \\`color\\` as a redundant encoding, using a customized color range:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"{\n const colors = {\n domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],\n range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']\n };\n \n return vl.markBar()\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),\n vl.y().count(),\n vl.color().fieldN('weather').scale(colors),\n vl.column().fieldN('weather')\n )\n .width(150)\n .height(150)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"{\n const colors = {\n domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],\n range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']\n };\n \n return vl.markBar()\n .encode(\n vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),\n vl.y().count(),\n vl.color().fieldN('weather').scale(colors)\n )\n .width(150)\n .height(150)\n .facet({column: vl.field('weather')})\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\nGiven all the extra code above, why would we want to use an explicit \\`facet\\` operator? For basic charts, we should certainly use the \\`column\\` or \\`row\\` encoding channels if we can. However, using the \\`facet\\` operator explicitly is useful if we want to facet composed views, such as layered charts.\n\nLet's revisit our layered temperature plots from earlier. Instead of plotting data for New York and Seattle in the same plot, let's break them up into separate facets. The individual chart definitions are nearly the same as before: one area mark and one line mark. We can layer the charts much as before, then invoke \\`facet\\` on the layered view, passing in the data and specifying \\`column\\` facets based on the \\`location\\` field:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature (°C)'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine().encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid)\n .facet({column: vl.field('location')})\n .data(weather)\n .transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`\nThe faceted charts we have seen so far use the same axis domains across the facet cells. This default of using *shared* scales and axes helps aid accurate comparison of values. However, in some cases you may wish to scale each chart independently, for example if the range of values in the cells differs significantly.\n\nSimilar to layered charts, faceted charts also support _resolving_ to independent scales or axes across plots. Let's see what happens if we call the \\`resolve\\` method to request \\`independent\\` y-axes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature (°C)'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine().encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid)\n .facet({column: vl.field('location')})\n .data(weather)\n .transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))\n .resolve({axis: {y: 'independent'}})\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`\n_The chart above looks largely unchanged, but the plot for Seattle now includes its own axis._\n\nWhat if we instead \\`resolve\\` the underlying scale domains?\n\n_Now we see facet cells with different axis scale domains. In this case, using independent scales seems like a bad idea! The domains aren't very different, and one might be fooled into thinking that New York and Seattle have similar maximum summer temperatures._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3}).encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature (°C)'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n\n const tempMid = vl.markLine().encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid)\n .facet({column: vl.field('location')})\n .data(weather)\n .transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))\n .resolve({scale: {y: 'independent'}})\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`\nTo borrow a cliché: just because you *can* do something, doesn't mean you *should*...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"concatenate = md`\n

\n## Concatenate\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\nFaceting creates [small multiple](https://en.wikipedia.org/wiki/Small_multiple) plots that show separate subdivisions of the data. However, we might wish to create a multi-view display with different views of the *same* dataset (not subsets) or views involving *different* datasets.\n\nVega-Lite provides *concatenation* operators to combine arbitrary charts into a composed chart. The \\`hconcat\\` operator performs horizontal concatenation, while the \\`vconcat\\` operator performs vertical concatenation.\n\nLet's start with a basic line chart showing the average maximum temperature per month for both New York and Seattle, much like we've seen before:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"vl.markLine()\n .data(weather)\n .encode(\n vl.x().month('date').title(null),\n vl.y().average('temp_max'),\n vl.color().fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`\n_What if we want to view not just temperature, but also precipitation and wind levels?_\n\nLet's create a concatenated chart consisting of three plots. We'll start by defining a \"base\" chart definition that contains all the aspects that should be shared by our three plots. We can then modify this base chart to create customized variants, with different y-axis encodings for the \\`temp_max\\`, \\`precipitation\\`, and \\`wind\\` fields. We can then concatenate them using the \\`hconcat\\` operator:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"{\n const base = vl.markLine()\n .data(weather)\n .encode(\n vl.x().month('date').title(null),\n vl.color().fieldN('location')\n )\n .width(240)\n .height(180);\n\n const temp = base.encode(vl.y().average('temp_max'));\n const precip = base.encode(vl.y().average('precipitation'));\n const wind = base.encode(vl.y().average('wind'));\n\n return vl.hconcat(temp, precip, wind).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`\nVertical concatenation works similarly to horizontal concatenation. _Using the \\`vl.vconcat\\` method, modify the code to use a vertical ordering instead of a horizontal ordering._\n\nFinally, note that horizontal and vertical concatenation can be combined. _What happens if you write something like \\`vl.vconcat(vl.hconcat(temp, precip), wind)\\`?_\n\nAs we will revisit later, concatenation operators let you combine any and all charts into a multi-view dashboard!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"repeat = md`\n

\n## Repeat\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"vl.markLine()\n .data(weather)\n .encode(\n vl.x().month('date').title(null),\n vl.y().average(vl.repeat('column')),\n vl.color().fieldN('location')\n )\n .width(240)\n .height(180)\n .repeat({column: ['temp_max', 'precipitation', 'wind']})\n .render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"vl.markCircle({size: 15, opacity: 0.5})\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n )\n .width(150)\n .height(150)\n .repeat({\n row: ['temp_max', 'precipitation', 'wind'],\n column: ['wind', 'precipitation', 'temp_max']\n })\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`\n*Now modify the code above to get a better understanding of chart repetition. Try adding another variable (\\`temp_min\\`) to the SPLOM. What happens if you rearrange the order of the field names in either the \\`row\\` or \\`column\\` arguments to the \\`repeat\\` operator?*\n\n_Finally, to really appreciate what the \\`repeat\\` operator provides, take a moment to imagine how you might recreate the SPLOM above using only \\`hconcat\\` and \\`vconcat\\`!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`\n

\n## A View Composition Algebra\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`\nTogether, the composition operators \\`layer\\`, \\`facet\\`, \\`concat\\`, and \\`repeat\\` form a *view composition algebra*: the various operators can be combined to construct a variety of multi-view visualizations.\n\nAs an example, let's start with two basic charts: a histogram and a simple line (a single \\`rule\\` mark) showing a global average.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"{\n const basic1 = vl.markBar()\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.x().month('date').type('ordinal'),\n vl.y().average('temp_max')\n );\n \n const basic2 = vl.markRule({stroke: 'firebrick'})\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.y().average('temp_max')\n );\n\n return vl.hconcat(basic1, basic2).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`\nWe can combine the two charts using a \\`layer\\` operator, and then \\`repeat\\` that layered chart to show histograms with overlaid averages for multiple fields:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"vl.data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .layer(\n vl.markBar().encode(\n vl.x().month('date').type('ordinal').title('Month'),\n vl.y().average(vl.repeat('column'))\n ),\n vl.markRule({stroke: 'firebrick'}).encode(\n vl.y().average(vl.repeat('column'))\n )\n )\n .width(200)\n .height(150)\n .repeat({column: ['temp_max', 'precipitation', 'wind']})\n .render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`\nFocusing only on the multi-view composition operators, the model for the visualization above is:\n\n~~~\n repeat(column: [...])\n |- layer\n |- basic1\n |- basic2\n~~~\n\nNow let's explore how we can apply *all* the operators within a final [dashboard](https://en.wikipedia.org/wiki/Dashboard_%28business%29) that provides an overview of Seattle weather. We'll combine the SPLOM and faceted histogram displays from earlier sections with the repeated histograms above:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`\n

\n##

Exercise

\n\nConsider the movies dataset:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"movies = (await require('vega-datasets@1'))['movies.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"printTable(movies.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`\nUse the \\`facet\\` operator as was used to make the \\`tempHist\\` histogram in the code above, but this time, to make a series of scatterplots that shows Worldwide Gross vs. Release Date for each Major Genre. The result should look like the image below -- but bigger, with 13 subcharts so you you will have to scroll right to see the chart. (Some hints):\n* Set circle size to 15\n* y-axis uses a log \\`scale\\` with \\`base\\` set to 100 and \\`domain\\` to \\`[100, 1e10]\\`\n* \\`tickCount\\` is 4 \n* color scheme is \\`category20\\`\n* \\`width\\` and \\`height\\` of each subchart is 150 x 150\n* filter out movies released after 2010 and those with Worldwide Gross = $0\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"FileAttachment(\"ex1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"// Code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`\nWe can move the description of the facet inside the encoding to achieve more control over the layout. Your faceted plot above should have a line that looks like \\`.facet({column: vl.field('Major_Genre')})\\` that appears after the specification for the encoding.\n\nCopy that code below, comment out this \\`.facet\\` code and add new faceting code that looks like this: \\`vl.facet({field: 'Major_Genre', columns:13}),\\` but within the encoding specificfaction. The chart will look that same as before. But now you can control how many columns appear in each row of the chart by changing the number of columns from 13 to something else. Try laying out the charts so that there are at most 4 in each row.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"// Code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`\n

\n## Summary\n\nFor more details on multi-view composition, including control over sub-plot spacing and header labels, see the [Vega-Lite View Composition documentation](https://vega.github.io/vega-lite/docs/composition.html).\n\nNow that we've seen how to compose multiple views, we're ready to put them into action. In addition to statically presenting data, multiple views can enable interactive multi-dimensional exploration. For example, using _linked selections_ we can highlight points in one view to see corresponding values highlight in other views.\n\nIn the next notebook, we'll examine how to author *interactive selections* for both individual plots and multi-view compositions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"